<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <script src="/ctbuc/resource/vue.js"></script>
    <link rel="stylesheet" href="/ctbuc/resource/element.css">
    <script src="/ctbuc/resource/element.js"></script>
    <script src="/ctbuc/resource/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <el-container :style="{'height':screenHeight}" >
		  <!--左侧导航栏-->
		    <el-aside width="auto" style="background-color: white;border-right: rgb(231, 228, 228) 1px solid;">
		  	  <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" background-color="white">
                <el-menu-item class="useravatar">
                  <el-avatar v-if="userinfo.userimg" :src="userinfo.userimg" style="width: 60px;height: 60px;"></el-avatar>
                  <el-avatar v-else src="/ctbuc/img/CampusCluster.png" style="width: 60px;height: 60px;"></el-avatar>
                </el-menu-item>

                <el-menu-item index="1" style="margin-top: 10px;" @click="showDiv=1">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">主页</span>
                </el-menu-item>
    
                <el-menu-item index="2" @click="showDiv=2">
                    <i class="el-icon-user-solid"></i>
                    <span slot="title">个人信息</span>
                </el-menu-item>
    
                <el-menu-item index="3" @click="showMyCluster">
                    <i class="el-icon-s-tools"></i>
                    <span slot="title">我的簇</span>
                </el-menu-item>
          </el-menu>    
        </el-aside>
        
		    <el-container>
			    <!--顶部栏-->
			    <el-header style="height: 60px;">
                <!--搜索框-->
                <div class="search">
                    <el-input placeholder="请输入内容" v-model="searchname">
                    <el-select v-model="searchtype" slot="prepend" placeholder="请选择" style="width: 100px;">
                        <el-option label="全部" value="" selected></el-option>
                        <el-option label="学习" value="学习"></el-option>
                        <el-option label="考试" value="考试"></el-option>
                        <el-option label="竞赛" value="竞赛"></el-option>
                        <el-option label="活动" value="活动"></el-option>
                        <el-option label="考研" value="考研"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="searchCluster"></el-button>
                    </el-input>
                </div>

                <!--用户名从后端获取数据-->
                <div style="float:right;margin-top: 15px;">
                    <el-dropdown>
                    <span>{{userinfo.username}}<i class="el-icon-caret-bottom"></i>	</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item onclick="javascript:location.href='/ctbuc/user/loginPage'">退出</el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
                </div>
          </el-header>
			
			<el-main>
        <div style="min-width: 1300px;min-height: 700px">
          <div v-show="showDiv == 1" index="1" name="mainpage">  <!--采用v-show来控制显示的元素-->
            <div class="clucontainer" style="height: 600px;">

              <!--所有的簇，需要获取簇的list 使用v-for循环添加该数量的卡片-->
              <el-card shadow="hover" v-for="item in allclusters" class="box-card" >
                <div slot="header" class="cardHeader">
                  <!--后端获取簇的信息-->
                  <span>{{item.clustername}}</span>
                </div>
                <div @click="showDetails(item)">
                  <!--获取簇的图片 :src-->
                  <el-image v-if="item.cluimg" class="cimg" :src="item.cluimg"></el-image>
                  <el-image v-else class="cimg" src="/ctbuc/img/CampusCluster.png"></el-image>
                  <div class="introduce">
                    <span>标签：
                      <el-tag size="small" v-for="type in item.typename">{{type}}</el-tag>
                    </span></br>
                    <span>简介：{{item.clustermark}}</span>
                  </div>
                </div>	
              </el-card>

              <!--弹框，显示簇的详细信息-->
              <el-dialog
                :title="cludetails.clustername"
                :visible.sync="dialogVisible"
                width="30%"
                :append-to-body="true">
                <div class="infocontent">
                  <div>
                    <div class="msg-clu">簇 主：</div>
                    <div class="meg-val">{{cludetails.hostname}}</div>
                  </div>
                  <div class="msg-item">
                    <div class="msg-clu">标 签:</div>
                    <div class="meg-val"><el-tag size="small" v-for="type in cludetails.typename">{{type}}</el-tag></div>
                  </div>
                  <div class="msg-item">
                    <div class="msg-clu">简 介：</div>
                    <div class="meg-val">{{cludetails.clustermark}}</div>
                  </div>
                  <div class="msg-item">
                    <div class="msg-clu">通 知：</div>
                    <div class="meg-val">{{cludetails.note}}</div>
                  </div>
                </div>
              </el-dialog>
            </div>

            <!--分页-->
            <div class="pagination">
              <el-pagination
                :current-page.sync="currentPage"
                :page-size="6"
                layout="total, prev, pager, next"
                :total="allclusters.total"
                @current-change="newpage">  <!--total需要从后端获取簇的总数量-->
              </el-pagination>
            </div>
          </div>
          
          <div v-show="showDiv == 2" index="2" name="userinfo">
          <div class="infobox">
            <div>
              <div style="float: left;font-weight: bold;color: black;">账号信息</div>
              <div style="float: left;width: 290px;border-bottom: 1px solid;margin-left:20px;margin-top: 10px;"></div>
              <el-button round type="primary" style="margin-top: -20px" @click="showDiv=5"> 修改信息</el-button>
            </div>
            <div class="infocontent">
              <div class="msg-item">
                <div class="msg-key">学 号：</div>
                <div class="meg-val">{{userinfo.stuid}}</div>
              </div>
              <div class="msg-item">
                <div class="msg-key">账 号：</div>
                <div class="meg-val">{{userinfo.username}}</div>
              </div>
              <div class="msg-item">
                <div class="msg-key">生 日：</div>
                <div class="meg-val">{{userinfo.birth}}</div>
              </div>
              <div class="msg-item">
                <div class="msg-key">姓 名：</div>
                <div class="meg-val">{{userinfo.realname}}</div>
              </div>
              <div class="msg-item">
                <div class="msg-key">性 别：</div>
                <div class="meg-val">{{userinfo.sex}}</div>
              </div>
              <div class="msg-item">
                <div class="msg-key">学 院：</div>
                <div class="meg-val">{{userinfo.institute}}</div>
              </div>
              <div class="msg-item">
                <div class="msg-key">头 像：</div>
                <img v-if="userinfo.userimg" style="width: 120px;height: 120px;"  :src="userinfo.userimg">    <!--需要:src传递显示头像-->
                <img v-else style="width: 120px;height: 120px;"  src="/ctbuc/img/CampusCluster.png">
              </div>
            </div>
            
          </div>
          </div>
          
          <div v-show="showDiv == 3" index="3" name="mycluster">
            <!--已创建的簇，需要获取该用户拥有的簇数量 使用v-for循环添加该数量的卡片-->
            <el-card shadow="hover" v-for="item in myclusters" class="box-card">
              <div slot="header" class="clearfix">
                <!--后端获取簇的信息-->
                <span>{{item.clustername}}</span>
                <el-button class="clusterbtn" style="margin-left: 20px;" type="danger"  @click="confirmdel(item)">删除</el-button>
				        <el-button class="clusterbtn" type="primary" @click="modcluster(item)">编辑</el-button>
              </div>
              <div @click="showDetails(item)">
                <!--获取簇的图片 :src-->
                <el-image v-if="item.cluimg" class="cimg" :src="item.cluimg"></el-image>
                <el-image v-else class="cimg" src="/ctbuc/img/CampusCluster.png"></el-image>
                <div class="introduce">
                  <span>标签：
                    <el-tag size="small" v-for="type in item.typename">{{type}}</el-tag>
                  </span></br>
                  <span>简介：{{item.clustermark}}</span>
                </div>
              </div>	
            </el-card>

            <!--未创建的簇，需要获取该用户拥有的簇数量，则为创建的数量为[5-已创建] 使用v-for循环添加该数量的卡片 -->
            <el-card shadow="hover" v-for="n in (5-myclusters.length)" class="box-card " style="min-height: 200px;" text-align="middle">
              <div class="icon_add">
                <i class="el-icon-circle-plus-outline" style="cursor: pointer;" @click="showDiv=4"></i>
              </div>
            </el-card>
          </div>

          <div v-show="showDiv == 4" index="4" name="addcluster">
            <!--返回按钮-->
            <div class="backicon">
              <i class="el-icon-arrow-left" style="cursor: pointer;" @click="showDiv=3"></i>
            </div>

            <div class="container">
              <el-form :label-position="labelPosition" :model="addclusterForm" :rules="rules" ref="addclusterForm" label-width="70px">
                <el-form-item label="簇 名：" prop="clustername">
                  <el-input v-model="addclusterForm.clustername"></el-input>
                </el-form-item>
    
                <el-form-item label=" 简 介：" prop="clustermark">
                    <el-input
                    type="textarea"
                    placeholder="请输入简介信息"
                    v-model="addclusterForm.clustermark"
                    maxlength="50"
                    :autosize="{ minRows: 2, maxRows: 8}"
                    show-word-limit>
                    </el-input>
                </el-form-item>
    
                <el-form-item label="类 型：" prop="typename">
                    <el-select v-model="addclusterForm.typename" multiple placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
    
                <el-form-item label=" 通 知：" prop="note">
                    <el-input
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 10}"
                    placeholder="请输入通知信息"
                    v-model="addclusterForm.note">
                    </el-input>
                </el-form-item>
    
                <!--upload传递参数使用:data 类型object-->
                  <!--https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/-->
                <el-form-item label="头 像：" prop="cluimg">
                    <el-upload
                    class="avatar-uploader"
                    action="#"
                    :http-request="httpRequest4"
                    v-model="addclusterForm.cluimg"

                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    >
                    <img v-if="addclusterForm.cluimg" :src="addclusterForm.cluimg" class="upavatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-button type="primary" @click="addForm('addclusterForm')" class="btn">确 定</el-button>
              </el-form>
            </div>
            
          </div>

          <div v-show="showDiv == 5" index="5" name="modifyinfo">
            <!--返回按钮-->
            <div class="backicon">
              <i class="el-icon-arrow-left" style="cursor: pointer;" @click="showDiv=2"></i>
            </div>

            <div class="container">
              <el-form :label-position="labelPosition" :model="userForm" :rules="userrule"  ref="userForm"  label-width="70px">
                <!--需要后端获取用户信息-->
                <el-form-item label="密 码：" prop="password">
                    <el-input v-model="userForm.password" placeholder="请输入新密码"></el-input>
                </el-form-item>

                <el-form-item label="性 别：" prop="sex">
                    <el-radio-group v-model="userForm.sex">
                      <el-radio label="男"></el-radio>
                      <el-radio label="女"></el-radio>
                    </el-radio-group>
                  </el-form-item>

                <!-- upload传递参数使用:data 类型object-->
                <el-form-item label="头 像：" prop="userimg">
                    <el-upload
                    class="avatar-uploader"
                    action="#"
                    :http-request="httpRequest5"
                    v-model="userForm.userimg"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    >
                    <img v-if="userForm.userimg" :src="userForm.userimg" class="upavatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-button type="primary" @click="modifyinfoForm('userForm')" class="btn">修 改</el-button>
              </el-form>
            </div>
          </div>

          <div v-show="showDiv == 6" index="6" name="modifycluster">
            <!--返回按钮-->
            <div class="backicon">
              <i class="el-icon-arrow-left" style="cursor: pointer;" @click="showDiv=3"></i>
            </div>

            <div class="container">
              <el-form :label-position="labelPosition" :model="modcluForm" :rules="rules2" ref="modcluForm" label-width="70px">
                <el-form-item label="簇 名：" prop="clustername">
                  <el-input v-model="modcluForm.clustername" placeholder="请输入新的簇名" readonly></el-input>
                </el-form-item>
    
                <el-form-item label=" 简 介：" prop="clustermark">
                    <el-input
                    type="textarea"
                    placeholder="请输入新的简介"
                    v-model="modcluForm.clustermark"    
                    maxlength="50"
                    show-word-limit>
                    </el-input>
                </el-form-item>

                <!--v-model的值为当前被选中的el-option的 value 属性值-->
                <el-form-item label="类 型：" prop="typename">
                    <el-select v-model="modcluForm.typename" multiple placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
    
                <el-form-item label=" 通 知：" prop="note">
                    <el-input
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 10}"
                    placeholder=""
                    v-model="modcluForm.note">
                    </el-input>
                </el-form-item>
    
                <!--upload传递参数使用:data 类型object-->
                <el-form-item label="头 像：" prop="cluimg">
                    <el-upload
                    class="avatar-uploader"
                    action="#"
                    :http-request="httpRequest6"
                    v-model="modcluForm.cluimg"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload">
                      <img v-if="modcluForm.cluimg" :src="modcluForm.cluimg" class="upavatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-button type="primary" @click="modifycluForm('modcluForm')" class="btn">修 改</el-button>
              </el-form>
            </div>
          </div>
        </div>
      </el-main>
      </el-container>
      </el-container>
    </div>

    <script>
     var index= new Vue({
        el: '#app',
        data() {
          return {
              showDiv:1,  //显示的内容
              activeIndex: '1',   //导航栏被选中的选项
              dialogVisible:false,  //弹出对话框
              currentPage:1,   //分页当前页面
              searchname:'',   //搜索栏，输入框
              searchtype:'',   //搜索栏，选择框
              screenHeight: document.documentElement.clientHeight+"px",   //获取当前屏幕高度
              file:'',
              cludetails:{},     //显示簇的详细信息
                
              userForm: {   //修改用户信息表 需要先从后端获取数据

                  userimg:''
              },    
              modcluForm:{
                  clustername:'',
                  clustermark:'',
                  typename:[],
                  note:'',
                  cluimg:''
              },      //修改簇的表单
                
              //addcluster
              labelPosition: 'right',
              addclusterForm: {
                typename:[],
                  cluimg:'',
              },
              userrule: {
                  password: [
                      {required: true,trigger: 'blur' ,validator: (rule, value, callback) => {
                              //中文验证
                              var reg = /^[\u4e00-\u9fa5]+$/;
                              if (value === "") {
                                  callback(new Error("请输入您的新密码"));
                              } else if (reg.test(value)) {
                                  callback(new Error("密码必须字母或数字组成"));
                              } else {
                                  callback();
                              }
                          }},
                      { min: 6, max: 10, message: '密码长度为6~10位', trigger: 'blur' }
                  ],
                    sex: [
                        { required: true, message: '请选择您的性别', trigger: 'change' }
                    ],
                    userimg: [
                        { required: true, message: '请上传您的头像', trigger: 'change' }
                    ]
                },
              rules: {
                    clustername: [
                        { required: true, message: '请输入簇名', trigger: 'blur' },
                    ],
                  typename: [
                        { required: true, message: '请选择簇的类型', trigger: 'blur' }
                    ],
                    cluimg: [
                        { required: true, message: '请上传簇的头像', trigger: 'blur' }    
                    ]
                },
              rules2: {
                  typename: [
                      { required: true, message: '请选择簇的类型', trigger: 'blur' }
                  ],
                  cluimg: [
                      { required: true, message: '请上传簇的头像', trigger: 'blur' }
                  ]
              },
              options: [{
                    value: '学习',
                    label: '学习'
                    }, {
                    value: '考试',
                    label: '考试'
                    }, {
                    value: '竞赛',
                    label: '竞赛'
                    }, {
                    value: '活动',
                    label: '活动'
                    }, {
                    value: '考研',
                    label: '考研'
                    }
                ],

              //从后端获取所有的簇
              allclusters:[],
              //从后端获取我的簇
              myclusters:[
                /*{
                  clustername:'',
                  hostname:'',
                  clustermark:'',
                  typename:[''],
                  note:'',
                  cluimg:''
                },*/
              ],
              //后端获取用户信息
              userinfo:{
                stuid:'',
                username:'',
                password:'',
                birth:'',
                realname:'',
                sex:'',
                institute:'',
                userimg:''
              }
          }
        },
        methods: {
           iii(event){
               alert(event.target);
               this.file = event.target.files[0];
           },
            newpage(val){
                this.searchClusters(this.searchname,this.searchtype,val);
            },
            //点击我的簇根据hostid查找簇
            showMyCluster(){
               this.showDiv = 3;
                _this = this;
                token = localStorage.getItem("token");
                console.log(token);
                fd = new FormData();
                fd.append("token",token);
                axios({
                    url: 'http://localhost:8181/ctbuc/cluster/findByHostId',   //所要请求的地址
                    data: fd,       //携带的参数
                    method: 'post',   //请求方式
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'token':token
                    }
                }).then((res)=> {
                    state = res.data.state;
                    if (!state) {
                        this.$message({
                            duration: 700,
                            message: res.data.msg,
                            type: 'error',
                        })
                        return;
                    }
                    console.log(res.data);
                    _this.myclusters = res.data.obj;
                    console.log(_this.myclusters);

                        //3、查找每个cluster对应的types
                        var fd3 = new FormData();
                        var clusters = _this.myclusters;
                        var cluids = new Array();
                        //将每个id存入数组
                        for(var i=0;i<clusters.length;i++){
                            cluids.push(clusters[i].id);
                        }
                        fd3.append("clusids",cluids);
                        axios({
                            url: 'http://localhost:8181/ctbuc/cluster/findTypes',   //所要请求的地址
                            method: 'post',   //请求方式
                            data:fd3,
                            headers: {
                                'Content-Type': 'multipart/form-data',
                            }
                        }).then((res)=>{
                            state = res.data.state;
                            if(!state){
                                this.$message({
                                    duration:700,
                                    message : res.data.msg,
                                    type : 'error',
                                })
                                return;
                            }
                            for(var i=0;i<_this.myclusters.length;i++){
                                _this.myclusters[i].typename = res.data.obj[i];
                                if(_this.myclusters[i].cluimg!=""){
                                    _this.myclusters[i].cluimg = "/ctbuc"+_this.myclusters[i].cluimg;
                                }
                                this.$set(_this.myclusters,i,_this.myclusters[i]);
                            }
                    });
                });
            },
          //查找簇，用于复用
          searchClusters(name,type,num){
                //2、分页查找所有cluster的信息
                //_this.allclusters
                _this = this;
                var fd = new FormData();
                fd.append("clustername",name);
                fd.append("typename",type);
                fd.append("num",num);
                axios({
                    url: 'http://localhost:8181/ctbuc/cluster/query',   //所要请求的地址
                    data:fd,
                    method: 'post',   //请求方式
                }).then((res)=>{
                    state = res.data.state;
                    if(!state){
                        this.$message({
                            duration:700,
                            message : res.data.msg,
                            type : 'error',
                        })
                        return;
                    }
                    console.log(res.data);
                    _this.currentPage = num;
                    _this.allclusters = res.data.obj.list;
                    _this.allclusters.total = res.data.obj.total;
                    //还有处理，暂时未写
                    console.log(_this.allclusters);
                    //3、查找每个cluster对应的types
                    var fd3 = new FormData();
                    var clusters = _this.allclusters;
                    var cluids = new Array();
                    //将每个id存入数组
                    for(var i=0;i<clusters.length;i++){
                        cluids.push(clusters[i].id);
                    }
                    fd3.append("clusids",cluids);
                    axios({
                        url: 'http://localhost:8181/ctbuc/cluster/findTypes',   //所要请求的地址
                        method: 'post',   //请求方式
                        data:fd3,
                        headers: {
                            'Content-Type': 'multipart/form-data',
                        }
                    }).then((res)=>{
                        state = res.data.state;
                        if(!state){
                            this.$message({
                                duration:700,
                                message : res.data.msg,
                                type : 'error',
                            })
                            return;
                        }
                        for(var i=0;i<_this.allclusters.length;i++){
                            _this.allclusters[i].typename = res.data.obj[i];
                            if(_this.allclusters[i].cluimg!=""){
                                _this.allclusters[i].cluimg = "/ctbuc"+_this.allclusters[i].cluimg;
                            }
                            this.$set(_this.allclusters,i,_this.allclusters[i]);
                            console.log(_this.allclusters[i].cluimg);
                        }
                        _this.allclusters = _this.allclusters;
                        console.log("簇的信息——————————");
                        console.log(_this.allclusters);
                        console.log("————————————————");
                        console.log(res.data);
                    });
                });

            },
          //点击显示簇详情页
          showDetails(item){
            _this = this;

              this.getNote(item.note).then((res)=>{
                console.log(item.note);
                _this.cludetails.note = res.data;
                _this.dialogVisible = true;
                _this.cludetails.clustername = item.clustername;
                _this.cludetails.hostname = item.hostname;
                _this.cludetails.clustermark = item.clustermark;
                _this.cludetails.typename = item.typename;
            }).catch((r)=>{
                  _this.cludetails.note = "";
                  _this.dialogVisible = true;
                  _this.cludetails.clustername = item.clustername;
                  _this.cludetails.hostname = item.hostname;
                  _this.cludetails.clustermark = item.clustermark;
                  _this.cludetails.typename = item.typename;
              });

          },

          //我的簇页面，点击删除
          confirmdel(item) {
            this.$confirm('此操作将永久删除该簇, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              /*写删除操作*/
                var fd = new FormData();
                fd.append("clustername",item.clustername);
                axios({
                    url: 'http://localhost:8181/ctbuc/cluster/delete',   //所要请求的地址
                    data: fd,       //携带的参数
                    method: 'post',   //请求方式
                    headers: {
                        //请求头很重要，我看见有人说可以不写，但我不写不行
                        'Content-Type': 'multipart/form-data',
                    }
                }).then((res)=>{
                    console.log(res.data);
                    if(!res.data.state){
                        this.$message({
                            duration:1500,
                            type: 'error',
                            message: "删除失败！！！"
                        });
                    }
                });
              this.$message({
                duration:1500,
                type: 'success',
                message: '删除成功!即将刷新！！！'
              });
              setTimeout(()=>{
                  location.reload();
              },1500);
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
          },
          //点击搜索
          searchCluster(){
              this.searchClusters(this.searchname,this.searchtype,1);
          },
          //我的簇，点击编辑
          modcluster(item){
            this.showDiv=6;


              _this = this;

              this.getNote(item.note).then((res)=>{
                  console.log(item.note);
                  _this.modcluForm.clustername = item.clustername;
                  _this.modcluForm.clustermark = item.clustermark;
                  _this.modcluForm.typename = item.typename;
                  _this.modcluForm.note = res.data;
                  _this.modcluForm.cluimg = item.cluimg;
              }).catch((r)=>{
                  _this.modcluForm.clustername = item.clustername;
                  _this.modcluForm.clustermark = item.clustermark;
                  _this.modcluForm.typename = item.typename;
                  _this.modcluForm.note = "";
                  _this.modcluForm.cluimg = item.cluimg;
              });
          },

          getNote(noteUrl){
              return  axios({
                  url: 'http://localhost:8181/ctbuc'+noteUrl,   //所要请求的地址       //携带的参数
                  method: 'get',   //请求方式
              });
          },

          //修改用户后提交表单
          modifyinfoForm(formName){
              _this = this;
              this.$refs[formName].validate((valid) => {
                  if (valid) {

                      var fd = new FormData();
                      fd.append("file",this.file);
                      fd.append("fileType","userimg");
                      fd.append("username",this.userinfo.username);
                      axios({
                          url: 'http://localhost:8181/ctbuc/file/upload',   //所要请求的地址
                          data: fd,       //携带的参数
                          method: 'post',   //请求方式
                          headers: {
                              'Content-Type': 'multipart/form-data',
                          }
                      }).then((res)=>{
                          state = res.data.state;
                          if(!state){
                              this.$message({
                                  duration:700,
                                  message : res.data.msg,
                                  type : 'error',
                              })
                              return;
                          }
                          console.log(res.data);
                          var token = localStorage.getItem("token");
                          var fd1 = new FormData();
                          fd1.append("userimg",res.data.obj);
                          fd1.append("token",token);
                          fd1.append("password",_this.userForm.password);
                          fd1.append("sex",_this.userForm.sex);
                          axios({
                              url: 'http://localhost:8181/ctbuc/user/modify',   //所要请求的地址
                              data: fd1,       //携带的参数
                              method: 'post',   //请求方式
                              headers: {
                                  'Content-Type': 'multipart/form-data',
                              }
                          }).then((res)=>{
                              state = res.data.state;
                              if(!state){
                                  this.$message({
                                      duration:700,
                                      message : res.data.msg,
                                      type : 'error',
                                  })
                                  return;
                              }
                              console.log(res.data);
                              this.$message({
                                  duration:1200,
                                  message : res.data.msg+"即将刷新页面！！！",
                                  type : 'success',
                              });
                              setTimeout(()=>{
                                  location.reload();
                              },1200);
                          })
                      });
                  }else{
                      this.$message({
                          message : '标记*号为必填项！',
                          type : 'error',
                      });
                      return false;
                  }

                  });

          },

          //修改簇后提交表单
          modifycluForm(formName){
               //先更新，再上传文件
              _this = this;
              this.$refs[formName].validate((valid) => {
                  if (valid) {
                      //先拟定一个cluimg
                      var cluimg = "/files/"+_this.userinfo.username+"/"+_this.modcluForm.clustername+"cluimg.jpg";
                      console.log(cluimg);
                      //拟定一个note
                      var note = "/files/"+_this.userinfo.username+"/"+_this.modcluForm.clustername+"note.txt";
                      var fd = new FormData();
                      fd.append("note",note);
                      fd.append("cluimg",cluimg);
                      fd.append("clustermark",_this.modcluForm.clustermark);
                      fd.append("clustername",_this.modcluForm.clustername);
                      fd.append("typenames",_this.modcluForm.typename);
                      //发送update请求
                      axios({
                          url: 'http://localhost:8181/ctbuc/cluster/update',   //所要请求的地址
                          data: fd,       //携带的参数
                          method: 'post',   //请求方式
                          headers: {
                              //请求头很重要，我看见有人说可以不写，但我不写不行
                              'Content-Type': 'multipart/form-data',
                          }
                      }).then((res)=>{
                          console.log(res.data);
                          if(!res.data.state){
                              this.$message({
                                  message : res.data.msg,
                                  type : 'error',
                              });
                              return;
                          }
                          //将文件上传至服务器
                          _this.upload(_this.file,_this.userinfo.username,_this.modcluForm.clustername,"cluimg").then((res)=>{
                              console.log(res.data);
                              _this.upload(_this.modcluForm.note,_this.userinfo.username,_this.modcluForm.clustername,"note").then((res)=>{
                                  console.log(res.data);
                                  if(!res.data.state){
                                      this.$message({
                                          duration:1500,
                                          message : "文件保存失败",
                                          type : 'error',
                                      })
                                      return;
                                  }
                              })
                          })
                          this.$message({
                              duration: 1500,
                              message: res.data.msg + "即将刷新！！！",
                              type: 'success',
                          });
                          setTimeout(()=>{
                              location.reload();
                          },1500);
                      });
                  }
                  else {
                      this.$message({
                          message : '标记*号为必填项！',
                          type : 'error',
                      })
                      return false;
                  }
              });
          },

          //添加簇后提交表单(需要验证表单必填项)
          addForm(formName){

              _this = this;
              //先验证
              this.$refs[formName].validate((valid) => {
                  if (valid) {
                      //发送三次请求，add、upload、update
                      //先拟定一个cluimg
                      var cluimg = "/files/"+_this.userinfo.username+"/"+_this.addclusterForm.clustername+"cluimg.jpg";
                      console.log(cluimg);
                      //拟定一个note
                      var note = "/files/"+_this.userinfo.username+"/"+_this.addclusterForm.clustername+"note.txt";
                      //准备发请求
                      console.log(_this.addclusterForm.typename)
                      var fd = new FormData();
                      fd.append("note",note);
                      fd.append("cluimg",cluimg);
                      fd.append("hostid",_this.userinfo.id);
                      fd.append("hostname",_this.userinfo.username);
                      fd.append("clustername",_this.addclusterForm.clustername);
                      fd.append("clustermark",_this.addclusterForm.clustermark);
                      fd.append("token",localStorage.getItem("token"));
                      fd.append("typenames",_this.addclusterForm.typename);
                      axios({
                          url: 'http://localhost:8181/ctbuc/cluster/add',   //所要请求的地址
                          data: fd,       //携带的参数
                          method: 'post',   //请求方式
                          headers: {
                              'Content-Type': 'multipart/form-data',
                              'token':localStorage.getItem("token")
                          }
                      }).then((res)=>{
                          state = res.data.state;
                          if(!state){
                              this.$message({
                                  duration:1500,
                                  message : res.data.msg,
                                  type : 'error',
                              })
                              return;
                          }
                          console.log(res.data);
                          //第二个请求，将发送两次，存储文件
                          _this.upload(_this.file,_this.userinfo.username,_this.addclusterForm.clustername,"cluimg").then((res)=>{
                              console.log(res.data);
                              _this.upload(_this.addclusterForm.note,_this.userinfo.username,_this.addclusterForm.clustername,"note").then((res)=>{
                                  console.log(res.data);
                                  if(!res.data.state){
                                      this.$message({
                                          duration:1500,
                                          message : "文件保存失败",
                                          type : 'error',
                                      })
                                      return;
                                  }
                              })
                          })
                          this.$message({
                              duration:1500,
                              message : res.data.msg+"即将刷新！！！",
                              type : 'success',
                          });
                          setTimeout(()=>{
                              location.reload();
                          },1500);
                      });
                  }
                  else {
                      this.$message({
                          message : '标记*号为必填项！',
                          type : 'error',
                      })
                      return false;
                  }
              });

           },
          //文件上传函数
          upload(file,username,clustername,fileType){
              var fd = new FormData();
              fd.append("file",file);
              fd.append("username",username);
              fd.append("clustername",clustername);
              fd.append("fileType",fileType);
              return axios({
                  url: 'http://localhost:8181/ctbuc/file/upload',   //所要请求的地址
                  data: fd,       //携带的参数
                  method: 'post',   //请求方式
                  headers: {
                      //请求头很重要，我看见有人说可以不写，但我不写不行
                      'Content-Type': 'multipart/form-data',
                  }
              });
          },

          httpRequest4 (data) {
                console.log("httpRequest4执行！！！");
                let _this = this;
                let rd = new FileReader(); // 创建文件读取对象
                let file = data.file;
              this.file = file;
                rd.readAsDataURL(file); // 文件读取装换为base64类型
                rd.onloadend = function (e) {
                    _this.addclusterForm.cluimg = this.result; // this指向当前方法onloadend的作用域
                }
            },

          httpRequest5 (data) {
              console.log("httpRequest5执行！！！");
                let _this = this;
                let rd = new FileReader(); // 创建文件读取对象
                let file = data.file;
                this.file = file;
                rd.readAsDataURL(file); // 文件读取装换为base64类型
                rd.onloadend = function (e) {
                    _this.userForm.userimg = this.result; // this指向当前方法onloadend的作用域
                }
            },

          httpRequest6 (data) {
                console.log("httpRequest6执行！！！");
                let _this = this;
                let rd = new FileReader(); // 创建文件读取对象
                let file = data.file;
              this.file = file;
                rd.readAsDataURL(file); // 文件读取装换为base64类型
                rd.onloadend = function (e) {
                    _this.modcluForm.cluimg = this.result; // this指向当前方法onloadend的作用域
                    //不知道为啥，视图又不更新
                    _this.$set(_this.modcluForm,_this.modcluForm.cluimg,this.result);
                }
            },

          beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
          }
        },
         //主页面加载的时候
        pageMainOnLoad(){
            //要做三件事情（发三次axios）
            /**
             * 待处理问题
             * userimg的拼接（userimg要改为usericon）
             * note的拼接或者读入数据（allclusters中的note改为noteurl）
             * cluimg同理，改为cluicon
             */
            _this = this;
            //1、查找用户信息
            token = localStorage.getItem("token");
            console.log(token);
            fd1 = new FormData();
            fd1.append("token",token);
            axios({
                url: 'http://localhost:8181/ctbuc/user/findById',   //所要请求的地址
                data: fd1,       //携带的参数
                method: 'post',   //请求方式
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'token':token
                }
            }).then((res)=>{
                state = res.data.state;
                if(!state){
                    this.$message({
                        duration:700,
                        message : res.data.msg,
                        type : 'error',
                    })
                    return;
                }
                console.log(res.data);
                birth = new Date(res.data.obj.birth);
                //loguptime = new Date(res.data.obj.loguptime);
                res.data.obj.birth = birth.toLocaleDateString();
                //把地址转为能够识别
                if(res.data.obj.userimg.length>0){
                    res.data.obj.userimg = "/ctbuc"+res.data.obj.userimg;
                }
                //res.data.obj.loguptime = loguptime.toLocaleDateString();
                _this.userinfo = res.data.obj;
            });
            this.searchClusters('','',1);
        },
         //查找簇的函数，可以调用它

        created(){
        },
        mounted(){
            //要做三件事情（发三次axios）
            /**
             * 待处理问题
             * userimg的拼接（userimg要改为usericon）
             * note的拼接或者读入数据（allclusters中的note改为noteurl）
             * cluimg同理，改为cluicon
             */
            _this = this;
            //1、查找用户信息
            token = localStorage.getItem("token");
            console.log(token);
            fd1 = new FormData();
            fd1.append("token",token);
            axios({
                url: 'http://localhost:8181/ctbuc/user/findById',   //所要请求的地址
                data: fd1,       //携带的参数
                method: 'post',   //请求方式
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'token':token
                }
            }).then((res)=>{
                state = res.data.state;
                if(!state){
                    this.$message({
                        duration:700,
                        message : res.data.msg,
                        type : 'error',
                    })
                    return;
                }
                console.log(res.data);
                birth = new Date(res.data.obj.birth);
                //loguptime = new Date(res.data.obj.loguptime);
                res.data.obj.birth = birth.toLocaleDateString();
                //把地址转为能够识别
                if(res.data.obj.userimg.length>0){
                    res.data.obj.userimg = "/ctbuc"+res.data.obj.userimg;
                }
                //res.data.obj.loguptime = loguptime.toLocaleDateString();
                _this.userinfo = res.data.obj;

            });
            //2、分页查找所有cluster的信息
            //_this.allclusters
            _this = this;
            axios({
                url: 'http://localhost:8181/ctbuc/cluster/query',   //所要请求的地址
                method: 'post',   //请求方式
            }).then((res)=>{
                state = res.data.state;
                if(!state){
                    this.$message({
                        duration:700,
                        message : res.data.msg,
                        type : 'error',
                    })
                    return;
                }
                console.log(res.data);
                _this.allclusters = res.data.obj.list;
                _this.allclusters.total = res.data.obj.total;
                //还有处理，暂时未写
                console.log(_this.allclusters);
                //3、查找每个cluster对应的types
                var fd3 = new FormData();
                var clusters = _this.allclusters;
                var cluids = new Array();
                //将每个id存入数组
                for(var i=0;i<clusters.length;i++){
                    cluids.push(clusters[i].id);
                }
                fd3.append("clusids",cluids);
                axios({
                    url: 'http://localhost:8181/ctbuc/cluster/findTypes',   //所要请求的地址
                    method: 'post',   //请求方式
                    data:fd3,
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    }
                }).then((res)=>{
                    state = res.data.state;
                    if(!state){
                        this.$message({
                            duration:700,
                            message : res.data.msg,
                            type : 'error',
                        })
                        return;
                    }
                    //设置type和cluimg
                    for(var i=0;i<_this.allclusters.length;i++){
                        _this.allclusters[i].typename = res.data.obj[i];
                        if(_this.allclusters[i].cluimg!=""){
                            _this.allclusters[i].cluimg = "/ctbuc"+_this.allclusters[i].cluimg;
                        }
                        this.$set(_this.allclusters,i,_this.allclusters[i]);
                    }
                    _this.allclusters = _this.allclusters;
                    console.log("簇的信息——————————");
                    console.log(_this.allclusters);
                    console.log("————————————————");
                    console.log(res.data);
                });
            });

        }
      })
    </script>

    <style>
      body{
        margin: 0 auto;
      }

      /*container布局样式*/
      .el-menu{
        border-right: 0px !important;
      }
      .el-container{
        border: 0px !important;
      }
      .el-container .el-header{
        min-width: 1300px;
      }
      .el-main{
        margin: 0 ;
        padding: 0;
        overflow:hidden;
        color: #606266;
        /*background-image: url(/img/background.png);
        background-size:340px 340px;
        background-repeat:no-repeat;
        background-position: 40% center;*/
      }
      .el-aside {
        color: #333;
        background-color: white;
      }

      /*左侧导航栏样式*/
      .el-menu-vertical-demo:not(.el-menu--collapse) {
          width: 200px;
          min-height: 400px;
      }
      .el-menu-item{
        font-size: 16px;
      }
      .el-avatar{
        background: white !important; 
      }
      .useravatar{
        text-align: center;
        height: 60px;
        margin-top: 20px;
      }
      .useravatar:hover{
        background: white !important; 
        cursor:default;
      }

      /*顶部栏样式*/
      .search{
        position: absolute;
        display: inline-block;
        width: 400px;
        margin-left: 25%;
        margin-top: 10px;
      }
      .el-header {
          background-color: white;
          color: #333;
          border-bottom:1px solid rgb(238, 236, 236);
      }
      .el-header i{
        font-size: 20px;
        cursor:pointer;
      }
      .el-header span{
        cursor:pointer;
      }

      /*mainpage的样式*/
      .el-card{
        float: left;
        margin-left: 55px;
        margin-top: 60px;
        border: 1px solid rgb(202, 202, 202);
      }
      .introduce{
        position: absolute;
        margin-top: 0;
        width: 190px;
        display: inline-block;
        margin-left: 10px;
        overflow: hidden;
      }
      .box-card {
        width: 375px;
	      height: 240px;
      }
      .el-tag{
        margin-right: 5px;
      }
      .pagination{
        width: 1300px;
        margin-top: 50px;
        text-align: center; 
      }
      .el-card__header{
        border-bottom: 1px solid rgb(202, 202, 202);
        font-weight: bold;
        padding: 15px 20px;
      }
      .el-card__body {
        font-family: "Microsoft YaHei";
        padding: 14px;
        color: #606266;
        line-height:1.5;
        font-size: 15px;
        cursor: pointer;
      }     
      .cimg{
        display:inline-block;
        width:160px;
        height:160px;
        border-radius: 10px;
      }
      .msg-clu{
        float: left;
        width: 50px;
      }

      /*userinfo的样式*/
      .infobox{
        position: absolute;
        width: 500px;
        font-size: 16px;
        padding-left: 30px;
        padding-top: 40px;
      }
      .infocontent{
        padding-left: 20px;
      }
      .msg-item{
        width: 100%;
        margin-top: 20px;
      }
      .msg-key{
        float: left;
        width: 65px;
      }
      .msg-val{
        float: left;
      }

      /*mycluster的样式*/
      .icon_add{
        margin: 0 auto;
        text-align: center;
        font-size: 30px;
        margin-top: 21%;
      }
      .el-icon-circle-plus-outline:hover{
        color:lightblue;
      }
      .clusterbtn{
        width: 50px;
        height: 30px;
        font-size: 15px;
        float: right; 
        padding: 3px 0;
        margin-top: -5px;
      }
      /*addcluster的样式*/
      .container{
        width: 400px;
        padding-left: 30%;
        padding-top: 10px;
      }
      .el-textarea .el-input__count{
        background-color: transparent;
        bottom: 0px;
        right: 5px;
      }
      .el-form-item {
          margin-bottom: 20px;
      }
      .avatar-uploader{
          height: 100px;
      }
      .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
          border-color: #409EFF;
      }
      .avatar-uploader-icon {
          font-size: 20px;
          color: #8c939d;
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
      }
      .upavatar {
          width: 100px;
          height: 100px;
          display: block;
      }
      .btn{
          font-size: 15px;
          width:300px;
          display: block;
          margin: 0 auto;
          margin-top: 25px;
      }
      /*modifyinfo的样式*/
      .backicon{
        font-size: 20px;
        padding-left: 10px;
        padding-top: 10px;
      }

    </style>
  </body>
</html>

